<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr />
    <p>count 值：{{ count }}</p>
    <p>总价：{{ totalPrice }}</p>
    <button @click="add1" class="btn btn-warning">+1</button>
    <button @click="addWithNum({ num1: 5, num2:6 })" class="btn btn-warning">
      +11
    </button>
    <button @click="updateCount" class="btn btn-warning">
      调用actions
    </button>
  </div>
</template>

<script>
// vuex提供了mapState函数，可以简化计算属性访问vuex的state
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Right',
  computed: {
    // count () {
    //   return this.$store.state.count
    // }
    ...mapState(['count']),
    ...mapGetters(['totalPrice'])
  },
  created () {

    this.add1()
    this.addWithNum({ num1: 5, num2:6 })
  },

  methods: {
    // add1 () {
      
    //   this.$store.commit('add1')
    // },
    // addWithNum (num) {
    //  this.$store.commit('addWithNum', num)
    // }
    // 如果封装一层方法，可以简化对vuex里的mutations
    // 但是自己封装方法太麻烦，所以可以用vuex提供的mapMutations
    ...mapMutations(['add1', 'addWithNum']),

    /*
      相当于生成了以下函数
    */
  //  updateCount () {
  //    this.$store.dispatch('updateCount')
  //  },
    ...mapActions(['updateCount']),
  }
}
</script>

<style></style>
